<!doctype html>
<html>
<head>

    <!--数据分析-->

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>AI</title>
    <link type="text/css" rel="stylesheet" href="style/index.css">
    <link type="text/css" rel="stylesheet" href="style/reset.css">
    <link type="text/css" rel="stylesheet" href="style/swiper.min.css"  >
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/path.js"></script>
    <script type="text/javascript" src="js/md5.js"></script>
    <script type="text/javascript" src="js/date.js"></script>
</head>

<body>
<header class="inhead-box">
    <div class="inhead"><a href="#" class="logo abe-fl">人脸识别系统</a>
        <div class="user-info abe-fr"><span><em class="vi-green">admin</em>，您好！ </span> <a href="#" class="uhead"><img
                src="images/user_head.jpg" alt=""></a></div>
        <nav class="abe-fr"><a href="customermanage.html">会员管理</a><a href="dataanalysis.html" class="active">数据分析</a><a
                href="aishow.html">AI显示</a><a
                href="systemsettings.html">系统设置</a><a href="extendmodule.html">扩展模块</a></nav>
    </div>
</header>
<div class="blank20"></div>
<div class="main">
    <div class="menu abe-fl">
        <h1 class="title"><a href="index.html"><i class="iconfont abe-ft24 mrg_10">&#xe601;</i>回首页</a></h1>
        <ul>
            <li><a href="dataanalysis.html"><i class="iconfont">&#xe6bb;</i>性别统计</a></li>
            <li><a href="agestatistics.html"><i class="iconfont">&#xe609;</i>年龄统计</a></li>
            <li ><a href="visitors.html"><i class="iconfont">&#xe609;</i>客流统计</a></li>
            <li class="active"><a href="videostatistic.html"><i class="iconfont">&#xe609;</i>客流统计新</a></li>

        </ul>
    </div>
    <div class="content abe-fr">
        <div class="local"> 当前位置<em class="abe-space">&gt;</em><span class="abe-gray3">性别统计</span>
            <div style="float: right">

                <input type="button" value="双目摄像机测试" onclick="videostatisctest()" >


                <select id="selectno">
                    <option value="4">按日</option>
                    <option value="5">按周</option>
                    <option value="6">按年</option>
                </select>
                <input type="date"  id="date" style="display: none" onchange="date()">

                <select id="week" style="display: none ">
                    <option value="1">本周</option>
                    <option value="2">上周</option>
                </select>

            </div>
        </div>


        <div id="container" style="height:400px"></div>




        <script type="text/javascript">


            var time1 = new Date().Format("yyyy-MM-dd");

            /*查出根据年龄不同分段的统计*/
            /*进入页面的时候，首先加载统计图*/
            $(function () {


                /**
                 * 用当前年份的当前月份
                 **/

                //刚进入的时候将当前时间渲染到日历表上
                $("#date").val(time1);

                var sign = $.md5(jsonSort(map) + token + time + time);
                map.sign = sign.toUpperCase();

                $.get(path + "/v1/statistical/videoStatisticccc", map, function (res) {
                    visitors(4,time1,1);
                }, "json");

            });

           function date(){

               visitors(4,$("#date").val(),1);
           }

            /*点击分类下拉框的时候重新加载统计图*/
            $("option").click(function () {
                var statistictype= $("#selectno").val();
                visitors(statistictype,$("#date").val(),$("#week").val());
            });

            
            function videostatisctest() {
                var sign = $.md5(jsonSort(map) + token + time + time);
                map.sign = sign.toUpperCase();
                $.post(path + "/v1/visitors-record/videostatisctest", map, function (res) {    //本周
                    var intest= res.data.IN;
                    var outtest= res.data.OUT;
                    if(res.code==0){
                        confirm("进入人次"+ intest+"    "+"出去人次"+outtest);
                    }
                }, "json");
            }


            /*统计方法*/
            function visitors(statistictype,datestr,weektype) {
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                app.title = '坐标轴刻度与标签对齐';
                map.type=statistictype;
                map.datestr=datestr;
                map.weektype=weektype;
                var sign = $.md5(jsonSort(map) + token + time + time);
                map.sign = sign.toUpperCase();
                /*查出根据性别的统计*/


                $.post(path + "/v1/statistical/videoStatistic", map, function (res) {    //本周




                    var weekdate = res.data.day;
                    var weekcount = res.data.incount;
                    var weekoldcount = res.data.outcount;

                    if($("#selectno").val()=='4'){
                        $("#date").show();
                        $("#week").hide();
                    }
                    if($("#selectno").val()=='5'){
                        $("#week").show();
                        $("#date").hide();
                    }
                    if($("#selectno").val()=='6'){
                        $("#date").hide();
                        $("#week").hide();
                    }
                    if(res.code==0){
                    option = {
                        title: {
                            text: '客流统计'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['总客流量', "非会员流量"]
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            //data: res.data.new.times,
                            data: weekdate
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '进入流量',
                                type: 'line',
                                stack: '总量',
                                data: weekcount,
                            },

                            {
                                name: '出去流量',
                                type: 'line',
                                stack: '总量',
                                data: weekoldcount,
                            }

                        ]
                    };

                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                    }else{


                    }

                }, "json");

            }
        </script>
    </div>
</div>
<div class="icp">Copyright © 2006 - 2015 人脸识别系统版权所有 沪ICP备 0000001号</div>
</body>
</html>
